<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Title</title>
		<style>
			#canvas {
				background: #000;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400"> </canvas>
		<script>
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
			/* 
            我们设置 Canvas 画布的宽度为 400，高度为 400，背景颜色为黑色（在 HTML 属性中直接设置宽度和高度是可以不加单位的，默认单位是 `px`）。
            在 Canvas 上画了一个圆心坐标为 100px、100px，半径为 50px 的白色的圆。

            如果不在 `canvas`标签上指定宽高 在css指定宽高的话  那么会等比缩小 默认画布是 300 * 150 

            通过js动态设置宽高也是可以的
            canvas.width = 400;
            canvas.height = 400;
            */

			/* 
            绘制一个圆
            */

			// context.beginPath();
			// context.arc(100, 100, 50, 0, Math.PI * 2, true);
			// context.closePath();
			// context.fillStyle = "rgb(255,255,255)";
			// context.fill();

			/* 
            绘制一条直线
            */
			// context.beginPath();
			// context.lineTo(200, 200);
			// context.lineTo(200, 100);
			// context.lineTo(100,50);
			// context.strokeStyle = '#fff';
			// context.stroke();

			/*
            绘制矩形  
            `fillStyle()` 和 `strokeStyle()` 来设置填充的颜色和描边的颜色。
            绘制阴影
            `fill()` 方法之前设置模糊指数（`shadowBlur`）和颜色（`shadowColor`）就可以了
            */

			// context.beginPath();
			// context.fillStyle = "#fff";
            // context.shadowBlur = 100;
            // context.shadowColor = '#fff';
			// context.fillRect(10, 10, 100, 100);
			// context.strokeStyle = "#fff";
			// context.strokeRect(130, 10, 100, 100);

            /* 
            绘制渐变
            `createLinearGradient()` 的参数是两个点的坐标，这两个点的连线实际上就是渐变的方向。可以使用 `addColorStop()` 方法来设置渐变的颜色。
            `gradient.addColorStop(stop,color);`:
                - `stop`：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
                - `color`：在结束位置显示的 CSS 颜色值
            */
            // var grd = context.createLinearGradient(0,0,0,400);
            // grd.addColorStop(0,'rgb(255, 0, 0)');
            // grd.addColorStop(0.2,'rgb(255, 165, 0)');
            // grd.addColorStop(0.3,'rgb(255, 255, 0)');
            // grd.addColorStop(0.5,'rgb(0, 255, 0)');
            // grd.addColorStop(0.7,'rgb(0, 127, 255)');
            // grd.addColorStop(0.9,'rgb(0, 0, 255)');
            // grd.addColorStop(1,'rgb(139, 0, 255)');
            // context.fillStyle = grd;
            // context.fillRect(0,0,400,400);
            

            /* 
            图形变换
            - `scale()` | 缩放当前绘图至更大或更小
            - `rotate()` | 旋转当前绘图
            - `translate()` | 重新映射画布上的 (0,0) 位置
            - `transform()` | 替换绘图的当前转换矩阵
            - `setTransform()` | 将当前转换重置为单位矩阵，然后运行 `transform()`
            
            */

            /* 
            缩放
            可以看到，在设置 `scale()` 方法之后再设置的矩形，无论是线条的宽度还是坐标的位置，都被放大了。
            并且 `scale()` 的效果是可以叠加的，也就是说，我们在上面的例子中使用了两次 `scale(2,2)` 那么，最后一个矩形相对于第一个矩形长和宽，以及坐标的位置就放大了 4 倍。
            */
            // context.strokeStyle = 'white';
            // context.strokeRect(5,5,50,25);
            // context.scale(2,2);
            // context.strokeRect(5,5,50,25);
            // context.scale(2,2);
            // context.strokeRect(5,5,50,25);


            /* 
            旋转
            */
            context.fillStyle = 'white';
            context.rotate(20*Math.PI/180);
            context.fillRect(70,30,200,100);
		</script>
	</body>
</html>
